<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
    #ell {
      color: red;
    }
  </style>
 </head>
 <body>
      <my-element2 content="Custom Element">
        <my-element2 id="ell">
          Hello
        </my-element2>
        <h2>Hello</h2>
      </my-element2>
      <!-- 使用自定义标签 -->
      <my-element>5353</my-element>
      <div id="dom">
        <nav>
          <a>Home</a>
          <a>About</a>
          <a>Contact</a>
          <a style="display: none">Pricing</a>
        </nav>        
      </div>
      <h2>Programming languages</h2>
<ul class="languages-list-1"></ul>  
<ul class="languages-list-2"></ul>  
<ul class="languages-list-3"></ul>  
 </body>
</html>
<script>
  class MyElement extends HTMLElement {
    constructor() {
      super(); // 必须在构造函数中调用 super 方法
      // 创建 Shadow DOM
      const shadow = this.attachShadow({mode: 'open'});
      // 创建元素内容
      const p = document.createElement('p');
      p.textContent = "Hello, Custom Tag!";
      // 将内容添加到 Shadow DOM 中
      shadow.appendChild(p);
    }
  }

  // 定义 'my-element' 标签名称
  customElements.define('my-element', MyElement);
</script>
<script>
  

class MyElement2 extends HTMLElement {//自定义元素的定义可以使用ES6的class语法

  get  content() {
    return this.getAttribute('content');
  }
 
  set  content(val) {
    this.setAttribute('content', val);
  }
}
//原生的window.customElements对象的define方法用来定义 Custom Element。该方法接受两个参数，第一个参数是自定义元素的名字，第二个参数是一个 ES6 的class。
window.customElements.define('my-element2', MyElement2, {extends: 'h2'});

window.onload=function(){//在页面元素加载完之后，才执行
function customTag(tagName, fn){//Array.from（[arguments]）；可以将字符串，数组，类数组集合转化为数组
  Array
    .from(document.getElementsByTagName(tagName))
    .forEach(fn);
}
function myElementHandler(element) {
  element.innerHTML = element.innerHTML;
}
customTag('my-element2', myElementHandler);
};

const dom = document.getElementById('dom')
// dom.innerHTML = `<ul>
//           <li>1</li>
//           <li>2</li>
//           <li>3</li>
//         </ul>`
        console.log(dom.textContent);
        console.log(dom.innerText);
        console.log(dom.innerHTML);
        console.log(dom.outerHTML);

        const langListElement1 = document.querySelector('.languages-list-1')
        const langListElement2 = document.querySelector('.languages-list-2')
        const langListElement3 = document.querySelector('.languages-list-3')

langListElement1.innerHTML = `
  <li>JavaScript</li>
  <li>Python</li>
  <li>PHP</li>
  <li>Ruby</li>
`

langListElement2.innerText = `
  <li>JavaScript</li>
  <li>Python</li>
  <li>PHP</li>
  <li>Ruby</li>
`
langListElement3.textContent = `
  <li>JavaScript</li>
  <li>Python</li>
  <li>PHP</li>
  <li>Ruby</li>
`
        
</script>